<template>
  <div class="app-container">
    <el-tabs type="border-card" :value="subActiveTab" @tab-click="subChangeTab">
      <el-tab-pane name="one" label="三方账户">
        <recharge-payment-merchant :channel="1" v-if="subActiveTab==='one'"/>
      </el-tab-pane>
      <el-tab-pane name="two" label="银行账户">
        <recharge-payment-merchant :channel="2" v-if="subActiveTab==='two'"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import RechargePaymentMerchant from '@/views/finance/paymentConfigOverview/rechargePaymentMerchant'
  import {tabs, grid} from '@/build'

  export default {
    name: "merchant",
    components: {
      RechargePaymentMerchant
    },
    mixins: [tabs, grid],
    data() {
      return {
        subActiveTab: 'one',
      }
    },
    watch: {
      '$route': {
        handler(next) {
          if (next.query.subActiveTab) {
            this.subActiveTab = next.query.subActiveTab;
          } else {
            this.$router.replace({path: this.$route.path, query: {...this.$route.query, subActiveTab: 'one'}});
          }
        },
        immediate: true
      },
      subActiveTab: {
        handler(current) {
          if (!this.$route.query.subActiveTab || this.$route.query.subActiveTab !== current) {
            this.$router.replace({path: this.$route.path, query: {...this.$route.query, subActiveTab: current}});
          }
        },
        immediate: true
      }
    },
    methods: {
      subChangeTab(tabs) {
        this.subActiveTab = tabs.name
        this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, tabs.label, true)});
      }
    },
    mounted() {
      this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, '商户配置总览-三方账户', true)});
    }
  }
</script>

<style lang="scss" scoped>


</style>
